<template>
  <div class="DDH5">
    <div
      v-dragSelect="{
        selectClass: ['.child'], //配置需要被选中的元素类名  -必填
        change: dragSelectChange, //选中时触发
      }"
    >
      <!-- 需要被选中的元素 -->
      <!-- 
            dragSelectType 类型字段 string  相同的类型会集成在数组中返回
            dragSelectId 信息字段 string  需要选中后获取的数据
            dragSelectWidth 自定义当前元素可以被选中的范围宽。

            ps: !注意,因为框选不可以将原生dom逆转未vue虚拟dom组件。所以这里是dom自定义属性。不是bind
        -->
      <el-table
        :row-class-name="tableRowClassName"
        :data="tableData"
        style="width: 100%"
        border
      >
        <el-table-column label="QC质检员姓名" align="center" prop="username">
          <template scope="{ row }">
            <div
              class="child"
              :dragSelectType="row.id"
              :dragSelectId="row.username"
            >
              {{ row.username }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="合格数" align="center" prop="pass">
          <template scope="{ row }">
            <div
              class="child"
              :dragSelectType="row.id"
              :dragSelectId="row.pass"
            >
              {{ row.pass }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="不合格数" align="center" prop="nopass">
          <template scope="{ row }">
            <div
              class="child"
              :dragSelectType="row.id"
              :dragSelectId="row.nopass"
            >
              {{ row.nopass }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="总数" align="center" prop="passtotal">
          <template scope="{ row }">
            <div
              class="child"
              dragSelectType="row.id"
              :dragSelectId="row.passtotal"
            >
              {{ row.passtotal }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="QC质检记录" align="center">
          <template slot-scope="{ row }">
            <el-button type="text" @click="onLook(row.id)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
  
  <script>
import { postApiCodeGetQcuserlist } from "@/api";
export default {
  data() {
    return {
      tableData: [],
      total: 0,
      form: {
        page: 1,
        size: 10,
      },
      SelectChangeValue: {},
    };
  },
  created() {
    this.postApiCodeGetQcuserlist(this.form);
  },
  watch: {},
  methods: {
    dragSelectChange(e) {
      this.SelectChangeValue = e;
      this.tableRowClassName()
    },
    tableRowClassName({ row }) {
      let { SelectChangeValue } = this;
      for (let key in SelectChangeValue) {
        if (row.id == key) {
            return "select-row";
        }
      }
      return "";
    },
    // qc列表
    async postApiCodeGetQcuserlist(data) {
      this.loading = true;
      this.form = data;
      let form = JSON.parse(JSON.stringify(this.form));
      if (form.qc_time) {
        form.qc_time = `${form.qc_time[0]}/${form.qc_time[1]}`;
      }
      postApiCodeGetQcuserlist(form)
        .then((res) => {
          this.loading = false;
          console.log("qc列表", res);
          this.tableData = res.data;
          this.total = Number(res.total);
        })
        .catch((err) => {
          this.loading = false;
        });
    },
  },
};
</script>
  
<style lang="scss">
.el-table .select-row {
  background: #f0f9eb;
}
.DDH5 {
  background: #fff;
}
</style>